<template>
  <div class="content-notice">
    <div v-for="item in venueStatus" :key="item.name" class="notice-item">
      <span class="venue-box" :style="{ background: item.color }"></span>
      <span>{{ item.name }}</span>
    </div>
  </div>
  <!-- 时间轴 -->
  <div class="venue-line">
    <div class="venue-title"></div>
    <div class="venue-item justify-start" v-for="item in timeItemList" :key="item">
      {{ item }}
    </div>
    <div class="venue-item">
      {{ venueInfo.endTime }}
    </div>
  </div>
  <div class="venue-line" v-for="venue in venueInfo.venueNumber" :key="venue">
    <div class="venue-title">场地{{ venue }}</div>
    <template v-if="pageShow && reservationHistory[venue]">
      <div
        class="venue-item venue-cls"
        v-for="time in timeItemList"
        :key="time"
        :style="{ background: reservationHistory[venue][time].color }"
      >
        <template v-if="reservationHistory[venue][time].id">
          <a-tooltip>
            <template #title>取消预订</template>
            <div class="info-box" @click="handleCancelReservation(venue, time)">
              <div class="item-text" v-ellipsis>
                {{ reservationHistory[venue][time].customerName }}
              </div>
              <div class="item-text" v-ellipsis>{{ reservationHistory[venue][time].mobile }}</div>
              <div class="item-text" v-ellipsis>{{ reservationHistory[venue][time].remark }}</div>
            </div>
          </a-tooltip>
        </template>
        <template v-else>
          <a-tooltip>
            <template #title>预订</template>
            <PlusOutlined class="add-icon" @click="handleAddPlace(venue, time)" />
          </a-tooltip>
        </template>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts" name="HomeContent">
import type { VenueInfo, VenueReservationItem } from '#/reserve-home'
import { computed, onMounted, ref, watch, type Ref } from 'vue'
import dayjs from 'dayjs'
import { PlusOutlined } from '@ant-design/icons-vue'

const emit = defineEmits(['handleAddPlace', 'handleCancelReservation'])
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
  venueInfo: {
    type: Object,
    default: () => {}
  }
})
const dataSource = computed(() => props.dataSource as VenueReservationItem[])
const venueInfo = computed(() => props.venueInfo as VenueInfo)

const venueStatus: any = {
  0: {
    name: '可预订',
    color: '#E4EEFF'
  },
  1: {
    name: '锁定',
    color: '#ABABAB'
  },
  2: {
    name: '付费',
    color: '#659DFF'
  },
  3: {
    name: '预定',
    color: '#FD7E2A'
  }
}

const timeItemList: Ref<string[]> = ref([])
const reservationHistory: Ref<any> = ref({})
const pageShow = ref(false)
const getDefault = () => {
  pageShow.value = false
  timeItemList.value = []
  const startDate = dayjs(venueInfo.value.startTime, 'HH:mm')
  const endDate = dayjs(venueInfo.value.endTime, 'HH:mm')
  const hoursDiff = endDate.diff(startDate, 'hours') || 0
  for (let i = 0; i < hoursDiff * 2; i++) {
    const currentTime = startDate.add(i * 30, 'minute')
    timeItemList.value.push(currentTime.format('HH:mm'))
  }
  for (let i = 0; i < venueInfo.value.venueNumber; i++) {
    const venue = i + 1
    reservationHistory.value[`${venue}`] = {}
    for (let j = 0; j < timeItemList.value.length; j++) {
      const time = timeItemList.value[j]
      const findItem: any =
        dataSource.value.find(
          (a) =>
            a.siteNumber === venue &&
            a.dueTime[0] === dayjs(time, 'HH:mm').hour() &&
            a.dueTime[1] === dayjs(time, 'HH:mm').minute()
        ) || {}
      if (findItem.id) {
        findItem.color = venueStatus[findItem.dueType].color
      } else {
        findItem.color = venueStatus[0].color
      }
      reservationHistory.value[`${venue}`][time] = findItem
    }
  }
  pageShow.value = true
}

const handleAddPlace = (venue: number, time: string) => {
  emit('handleAddPlace', [venue], time)
}

const handleCancelReservation = (venue: number, time: string) => {
  emit('handleCancelReservation', [venue], time)
}

watch(
  () => props.dataSource,
  () => {
    getDefault()
  }
)

onMounted(() => {
  getDefault()
})
</script>
<style lang="less" scoped>
.content-notice,
.venue-line {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.content-notice {
  padding-left: 100px;
  height: 40px;
  .notice-item {
    display: flex;
    margin-right: 20px;
    .venue-box {
      display: inline-block;
      margin-right: 8px;
      width: 20px;
      height: 20px;
    }
  }
}
.venue-line {
  height: 60px;
  .venue-title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
  }
  .venue-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 60px;
    height: 60px;
    font-size: 12px;
    .info-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      cursor: pointer;
      .item-text {
        width: 100%;
        text-align: center;
      }
    }
    .add-icon {
      font-size: 24px;
      color: transparent;
      cursor: pointer;
      &:hover {
        color: #666666;
      }
    }
  }
  .venue-cls {
    border: 1px solid var(--border-color);
    border-collapse: collapse;
  }
}
.justify-start {
  align-items: start !important;
}
</style>
